<template>
    <div>
        <!-- 内容 -->
        <div class="FoundationClass">
            <van-tabs @change="tabsChange" v-model:active="active" type="card" class="FoundationContentStyle"
                title-active-color="#fff">
                <van-tab name="gdmp" title="管道摸排"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                    <div class="FFContentStyle">
                        <div style="margin-top: 14px">
                            <div class="titleClass">
                                <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px"
                                    src="../../../assets/images/矩形装饰.png" />
                                项目概况
                            </div>
                            <div class="contentClass">
                                <div style="margin: 15px">
                                    <div class="divStyleText Flex" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>摸排总长：</span>
                                        </div>
                                        <div>{{ projectlist.totalLength + `KM` }}</div>
                                    </div>
                                    <div class="divStyleText Flex" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>摸排面积：</span>
                                        </div>
                                        <div>{{ projectlist.area + `㎡` }}</div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>道路工程量划分：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.roadProjectPart }}
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>管道埋设深度：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.pipelineBurialDepth }}
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>材质：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.material }}
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>管径：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.pipeDiameter }}
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>管道及检查井典型缺陷：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.pipeDefect }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab name="qyjc" title="清淤检测"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                    <div class="FFContentStyle">
                        <div style="margin-top: 14px">
                            <div class="titleClass">
                                <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px"
                                    src="../../../assets/images/矩形装饰.png" />
                                项目概况
                            </div>
                            <div class="contentClass">
                                <div style="margin: 15px">
                                    <div class="divStyleText Flex" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>清淤总长：</span>
                                        </div>
                                        <div>{{ projectlist.totalLength + `KM` }}</div>
                                    </div>
                                    <div class="divStyleText Flex" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>清淤面积：</span>
                                        </div>
                                        <div>{{ projectlist.area + `㎡` }}</div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>道路工程量划分：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.roadProjectPart }}
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>管道预埋深度：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.pipelineBurialDepth }}
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>材质：</span>
                                        </div>
                                        <div class="specialText">{{ projectlist.material }}</div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>管径：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.pipeDiameter }}
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>管道缺陷情况数据：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.pipeDefect }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 14px">
                            <div class="titleClass">
                                <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px"
                                    src="../../../assets/images/矩形装饰.png" />
                                有限空间作业
                            </div>
                            <div class="contentClass">
                                <div style="margin: 15px">
                                    <div class="lJStyle Flex" style="margin-bottom: 18px">
                                        <div class="Flex" style="width: 14%; height: 100%; justify-content: center">
                                            <img src="../../../assets/images/Frame.png"
                                                style="width: 15px; height: 15px" alt="" />
                                        </div>
                                        <div class="Flex" style="
                        width: 80%;
                        height: 100%;
                        justify-content: space-between;
                        font-size: 12px;
                      ">
                                            <div style="padding-left: 16px">累计预警</div>
                                            <div style="color: #42eec7">{{ Passed + `项` }}</div>
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>安全气体监测数据与报警</span>
                                        </div>
                                        <div style="padding: 0px 16px">
                                            <div class="Flex" style="
                          height: 20px;
                          margin-top: 6px;
                          line-height: 20px;
                          justify-content: space-between;
                        " v-for="(item, index) in ApprovalList" :key="index">
                                                <span class="proName" :style="{
                                                    color: item.state == false ? 'white' : '#F5222D',
                                                }">{{ item.gasName }}</span>
                                                <span class="nCarousel" style="color: #20f6e9" :style="{
                                                    color: item.state == false ? 'white' : '#F5222D',
                                                }">{{ item.countValue + " " + item.unitValue }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab name="xfgc" title="修复工程"
                    title-style="font-size: 16px; font-weight: 600;height:35px;display:flex;justify-content: start;padding-left: 10px;">
                    <div class="FFContentStyle">
                        <div style="margin-top: 14px">
                            <div class="titleClass">
                                <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px"
                                    src="../../../assets/images/矩形装饰.png" />
                                项目概况
                            </div>
                            <div class="contentClass">
                                <div style="margin: 15px">
                                    <div class="divStyleText Flex" style="
                      flex-direction: column;
                      justify-content: start;
                      align-items: normal;
                    ">
                                        <div class="Flex" style="justify-content: space-between">
                                            <div class="Flex">
                                                <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                    alt="" />
                                                <span>各工艺总长：</span>
                                            </div>
                                            <div>{{ totalValue + `KM` }}</div>
                                        </div>
                                        <div class="Flex" v-for="(item, index) in WorkmanShiplist" :key="index" style="
                        height: 20px;
                        padding-left: 16px;
                        width: 100%;
                        margin-top: 4px;
                      ">
                                            <div class="Flex" style="justify-content: space-between; width: 100%">
                                                <div>{{ item.workmanShipName + ":" }}</div>
                                                <div>{{ item.workmanShipLength }}KM</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>管道埋设深度：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.pipelineBurialDepth }}
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>材质：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.material }}
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>管径：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.pipeDiameter }}
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>修复采用工程量：</span>
                                        </div>
                                        <div class="specialText">
                                            {{ projectlist.repairAdopt }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 14px">
                            <div class="titleClass">
                                <img style="margin: 9px 12px 10px 11px; width: 17px; height: 17px"
                                    src="../../../assets/images/矩形装饰.png" />
                                有限空间作业
                            </div>
                            <div class="contentClass">
                                <div style="margin: 15px">
                                    <div class="lJStyle Flex" style="margin-bottom: 18px">
                                        <div class="Flex" style="width: 14%; height: 100%; justify-content: center">
                                            <img src="../../../assets/images/Frame.png"
                                                style="width: 15px; height: 15px" alt="" />
                                        </div>
                                        <div class="Flex" style="
                        width: 80%;
                        height: 100%;
                        justify-content: space-between;
                        font-size: 12px;
                      ">
                                            <div style="padding-left: 16px">累计审批情况</div>
                                            <div style="color: #42eec7">{{ Passed + `项` }}</div>
                                        </div>
                                    </div>
                                    <div class="divStyleText" style="">
                                        <div class="Flex">
                                            <img src="../../../assets/images/home/ListTitleicon.png" width="16"
                                                alt="" />
                                            <span>安全气体监测数据与报警</span>
                                        </div>
                                        <div style="padding: 0px 16px">
                                            <div class="Flex" style="
                          height: 20px;
                          margin-top: 6px;
                          line-height: 20px;
                          justify-content: space-between;
                        " v-for="(item, index) in ApprovalList" :key="index">
                                                <span class="proName" :style="{
                                                    color: item.state == false ? 'white' : '#F5222D',
                                                }">{{ item.gasName }}</span>
                                                <span class="nCarousel" style="color: #20f6e9" :style="{
                                                    color: item.state == false ? 'white' : '#F5222D',
                                                }">{{ item.countValue + " " + item.unitValue }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted, computed } from "vue";
import {
    GetRepairInfo,
    GetRepairGasValueLinkCount,
    GetRepairWorkmanShip,
} from "@/api";
import { useAppStore } from "../../../store";
import { CreatedFormData } from "@/utils/CreatedFormData";
import LookIframe from "@/components/LookIframe/index.vue";
export default defineComponent({
    components: {
        LookIframe,
    },
    setup() {
        const { userInfo, projectInfo, projectList, baseUrl } = useAppStore();
        const active = ref("gdmp");
        const projectlist = ref({});
        const ApprovalList = ref({});
        const Passed = ref("");
        const type = ref(1);
        const WorkmanShiplist = ref([]);
        const tabsChange = (e) => {
            active.value = e;
            if (e == "gdmp") {
                type.value = 1;
            } else if (e == "qyjc") {
                type.value = 2;
                GetRepairApproval_QY(1);
            } else {
                type.value = 3;
                GetRepairApproval_QY(2);
                GetRepairWorkmanShip_XF();
            }
            doRefresh();
        };
        // 获取基坑
        const doRefresh = async () => {
            const res = await GetRepairInfo(
                CreatedFormData({
                    xid: projectInfo.id,
                    type: type.value,
                })
            );
            projectlist.value = res.data ? res.data : {};
        };
        const GetRepairApproval_QY = async (types) => {
            const res = await GetRepairGasValueLinkCount(
                CreatedFormData({
                    xid: projectInfo.id,
                    type: types,
                })
            );
            Passed.value = res.data.num;
            ApprovalList.value =
                res.data.list.length > 0 ? res.data.list[0].gasValueList : [];
        };
        const GetRepairWorkmanShip_XF = async () => {
            const res = await GetRepairWorkmanShip(
                CreatedFormData({
                    xid: projectInfo.id,
                })
            );
            WorkmanShiplist.value = res.data;
        };
        const totalValue = computed(() => {
            return WorkmanShiplist.value.reduce((sum, item) => {
                const length = parseFloat(item.workmanShipLength);
                return sum + length
            }, 0);
        });
        onMounted(() => {
            doRefresh();
        });

        return {
            active,
            projectlist,
            Passed,
            type,
            ApprovalList,
            totalValue,
            WorkmanShiplist,
            tabsChange,
        };
    },
});
</script>

<style lang="less" scoped>
.FoundationClass {
    color: #fff;
    width: 100%;
    height: 100%;

    .FoundationContentStyle {
        width: 100%;
        height: 100%;
        --van-tabs-card-height: 70px;

        :deep(.van-tab__text--ellipsis) {
            font-size: 32px;
        }

        :deep(.van-tabs__content) {
            height: 94%;
            width: 100%;
        }

        :deep(.van-tab__panel) {
            height: 98%;
        }

        :deep(.van-tabs__nav) {
            background: none;
        }

        :deep(.van-tabs__nav--card) {
            margin: 0;
            border: none;
        }

        :deep(.van-tab--card) {
            background: url(../../../assets/images/home/大事记.png) no-repeat;
            background-size: 100% 100%;
            color: #8991a2;
            border-right: none;
            margin-right: 2%;
        }

        :deep(.van-tab--card.van-tab--active) {
            background: url(../../../assets/images/home/项目概况.png) no-repeat;
            background-size: 100% 100%;
        }
    }
}

.FFContentStyle {
    height: 100%;
    width: 100%;
    overflow: auto;
    scrollbar-width: none; // 隐藏滚动条样式
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    display: flex;
    align-items: center;
    background: url("../../../assets/images/Group9436.png") no-repeat;
    background-size: 100% 100%;
}

.Flex {
    display: flex;
    align-items: center;
}

.contentClass {
    display: flex;
    justify-content: start;
    padding: 10px;
    width: 100%;
    flex-direction: column;
    background-color: rgba(33, 46, 90, 0.5);
}

.contentClass .divStyleText {
    font-size: 24px;
    border-bottom: 1px solid #728b9a6b;
    padding: 12px 0;
}

.contentClass .divStyleText:last-child {
    border-bottom: none;
}

.lJStyle {
    width: 100%;
    height: 76px;
    background: url("../../../assets/images/Group 9618.png") no-repeat;
    background-size: 100% 100%;
}

.proName {
    width: 50%;
    color: #e2edff;
}

.nCarousel {
    width: 50%;
    text-align: right;
}

.specialText {
    text-indent: 0em;
    padding-left: 0em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 12px 0px 0px 30px;
    line-height: 40px;
    // height: 80px;
}
</style>
